

<template>
    <div class="dao" @click="todoClick" :style="mstyle">
        <van-circle
        v-model="currentRate"
        :rate="rate"
        :size="size"
        :stroke-width="swidth"
        :speed="speed"
        :text="text"
        :clockwise="!flag"
        :color="color"

      />
    </div>
</template>

<script>
export default {
  props:{
    mstyle:{
      type:Object,
      default(){
        return {

        }
      }
    },
    size:{
      type:String,
      default:'60px',
    },
    swidth:{
      type:Number,
      default:40,
    },
    time:{  // 倒计时的时间
      type:Number,
      default:5
    },
    flag:{
      type:Boolean,  // 顺时针

    },
    color:{
      type:[Object,String] ,
      default(){
        return {
          '0%': '#3fecff',
        '100%': '#6149f6',
        }
      }
    },
    onFinish:{
      type:Function,
      default(){
        return ()=>{

        }
      }
    },
    toggle:{
      type:Boolean,
    },
    isClick:{
      type:Boolean,
    }
  },
  data(){
    return {
      currentRate:0,
      rate:100,
    }
  },
  computed:{
    speed(){
      return this.rate/this.time;
    },
    text(){
        // return
        return this.toggle ?  (Math.floor((this.rate - this.currentRate) / this.speed) + ' S') :( this.currentRate.toFixed(0) + '%')
    }
  },
  watch:{
    currentRate(v){
      if(v==this.rate){
        this.onFinish()
      }
    }
  },
  methods:{
    todoClick(){
      if(this.isClick){
        this.onFinish()
      }
    }
  }
}
</script>

<style scoped  lang="scss" >
   .dao{
    position: fixed;
    top:20px;
    right:20px;
    z-index:1000;
    ::v-deep .van-circle__text{
        color:#3fecff !important;
        font-size: 18px !important;
    }
  }
</style>
